<template>
  <div class="follow">
    <img src="@/assets/phoneTop.jpg" alt class="phoneTop" />

    <topBars msg="我的关注" />

    <myFollowList
      :follow="myFollow"
      v-for="(myFollow,index) in myFollowLists"
      :key="myFollow.id"
      @unfollow="unfollow(myFollow.id,index)"
      @follow="follow(myFollow.id,index)"
    />
  </div>
</template>

<script>
import topBars from "@/components/TopBars";
import myFollowList from "@/components/MyFollowList";

export default {
  data() {
    return {
      myFollowLists: []
    };
  },
  mounted() {
    this.loadPage();
  },
  methods: {
    // 封装渲染的函数
    loadPage() {
      this.$axios({
        url: "/user_follows"
      }).then(res => {
        // console.log(res);
        const { data } = res.data;
        // console.log('新增标识前的数组',data);
        // this.myFollowLists = data;

        // 利用map遍历增加新属性(取关标识)返回新数组
        const newLists = data.map(item => {
          return { ...item, isFollow: true };
        });

        this.myFollowLists = newLists;
        // console.log('新增了标识属性的新数组',this.myFollowLists);
      });
    },

    unfollow(id, index) {
      // this.loadPage();
      console.log(id, index);

      this.$axios({
        url: "/user_unfollow/" + id
      }).then(res => {
        this.myFollowLists[index].isFollow = false;
      });
    },

    follow(id, index) {
      this.$axios({
        url: "/user_follows/" + id
      }).then(res => {
        this.myFollowLists[index].isFollow = true;
      });
    }
  },
  components: {
    topBars,
    myFollowList
  }
};
</script>

<style lang="less" scoped>
.phoneTop {
  width: 100%;
}
</style>